<template>
  <div class="activity-detail" :class="{ app: $UA.isJM }">
    <bottom-open-app-adv v-if="!$UA.isJM"></bottom-open-app-adv>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item,index) in imgList" :key="index"><img :src="item" alt=""></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <Button type="primary">主要按钮</Button>
  </div>
</template>
<script>
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import { Button } from 'vant';
  export default {
    components: {
      BottomOpenAppAdv,
      Button
    },
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination',
          },
        },
        imgList: [
          'https://upload-bbs.mihoyo.com/upload/2021/08/21/d62fdb9a5a094c68e31699e7e41701d6.jpeg',
          'https://upload-bbs.mihoyo.com/upload/2021/08/21/fc3975bea88ec4c0ec03bfced98f66b8.jpeg',
          'https://upload-bbs.mihoyo.com/upload/2021/08/21/d62fdb9a5a094c68e31699e7e41701d6.jpeg',
        ],
      };
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper;
      },
    },
    mounted() {
      // console.log('Current Swiper instance object', this.swiper);
      this.init()
    },
    methods: {
      init(){
      }
    },
  };
</script>
<style lang="less" scoped>
  .activity-detail {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 7rem;
    padding-top: 6.5rem;
    white-space: initial;

    img{
      width: 100%;
    }

    &.app {
      padding-top: 0;
    }
  }
</style>
